<template>

  <div>
    <query />
    <van-tabs >
      <van-tab
        :title="item.name"
        class="acqes"
        v-for="(item, index) in lists"
        :key="index"
        
      >
      <p @click="yiqi(item.id)">{{ item.name }}</p>
        
        <br />
        {{ item.front_desc }}
      </van-tab>
    </van-tabs>
    <div class="aqew" v-for="(item,index) in xiang"
    :key="index">
    <div class="oooo">
      <img :src="item.list_pic_url" alt="">
    <p>{{item.name}}</p>
    </div>
    
    </div>
  </div>
</template>

<script>
import query from "../components/query";
export default {
  components: {
    query,
  },
  data() {
    return {
      lists: [],
      active: 1,
      xiang: [],
      
    };
  },
  mounted() {
    this.$axios
      .get("http://shop.bufantec.com/bufan/category/categoryNav?id=1005000")
      .then((res) => {
        console.log(res);
        this.lists = res.data.navData;
        this.yiqi()
      });
    this.$axios
      .get("http://shop.bufantec.com/bufan/index/index")
      .then((res) => {
        this.xiang = res.data.newCategoryList[0].goodsList
        console.log(res);
      });
  },
   methods:{
    yiqi(id){
      // alert("1111")
      console.log(id);
    this.xiang.forEach((item)=>{
      if(item.id == id){
        this.lists = item;
        this.id = item.id
      }
    })  
    }
    
  },
};
</script>

<style lang="scss">
van-tabs{
  z-index: 99999;
}
.acqes {
  margin-left: 5px;
  // overflow: auto;
}
.aqew{
  width: 176px;
  display: inline-flex;
  border: 1px solid grey;
  justify-content: space-around;
  img{
    width: 100%;
  }
}

</style>